<template>
  <div class="consultation">
    <div class="input">
      <input placeholder="输入您要咨询的问题" type="text" />
      <div class="btn">提问</div>
    </div>
    <div class="container">
      <div v-for="i in 5" :key="i" class="consultation-box">
        <h3>七月老师你还有后续的Python课程吗，你的微信小程序课程很棒！！！我想用Python找女票可以么？</h3>
        <p>亲，会的哟，谢谢你的夸奖，上了老司机的车，女朋友还远吗！快上车呀！</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .consultation {
    width: 1000px;
    .input {
      height: 62px;
      width: 80%;
      margin: 0 auto;
      margin-bottom: 60px;
      input {
        float: left;
        box-sizing: border-box;
        font-size: 16px;
        width: 85%;
        height: 62px;
        line-height: 62px;
        color: #07111b;
        padding-left: 24px;
        border: 1px solid #d9dde1;
        outline: 0;
      }
      .btn {
        float: left;
        text-align: center;
        line-height: 62px;
        background-color: #f01404;
        color: #fff;
        height: 62px;
        box-sizing: border-box;
        width: 15%;
        cursor: pointer;
      }
    }
    .container {
      width: 100%;
      margin: 0 auto;
      column-count: 2;
      column-gap: 0;
      width: 1000px;
      box-sizing: border-box;
      .consultation-box {
        break-inside: avoid;
        margin: 0px auto;
        margin-bottom: 40px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: 20px;
        width: 90%;
        h3 {
          color: #1c1f21;
          font-size: 17px;
          line-height: 28px;
          margin-bottom: 20px;
        }
        p {
          color: #4d555d;
          font-size: 15px;
          line-height: 28px;
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) {
  .consultation {
    margin: 10px auto !important;
    width: 100%;
    overflow: hidden;
    .input {
      height: 40px;
      width: 99%;
      margin: 0 auto;
      margin-bottom: 20px;
      input {
        float: left;
        box-sizing: border-box;
        font-size: 16px;
        width: 80%;
        height: 100%;
        color: #07111b;
        padding-left: 24px;
        border: 1px solid #d9dde1;
        outline: 0;
        vertical-align: middle;
      }
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        background-color: #f01404;
        color: #fff;
        height: 100%;
        width: 20%;
      }
    }
    .container {
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      .consultation-box {
        break-inside: avoid;
        margin: 0px auto;
        margin-bottom: 15px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: 10px;
        width: 90%;
        h3 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          word-break: break-all;
          color: #1c1f21;
          font-size: 15px;
          line-height: 28px;
          margin-bottom:10px;
        }
        p {
          color: #4d555d;
          font-size: 13px;
          line-height: 28px;
        }
      }
    }
  }
}
</style>